<!--  -->
<template>
  <div class="common" id="app">
    <div class="box border">
      <div class="title">
        <span class="name" @click="back"
          >{{ type[$route.query.type] }}一览</span
        >
      </div>
      <table>
        <thead>
          <tr>
            <td width="49px">序号</td>
            <td>代码</td>
            <td>名称</td>
            <td
              class="cur"
              @click="tagSort(keys['latest_price'], 'latest_price')"
            >
              最新{{
                $route.query.type == "sh2hk" || $route.query.type == "sz2hk"
                  ? "(HKD)"
                  : ""
              }}
              <i
                class="icon"
                :class="['up', 'down'][keys['latest_price']]"
                v-show="cur == 'latest_price'"
              ></i>
            </td>
            <td
              class="cur"
              @click="tagSort(keys['px_change_rate'], 'px_change_rate')"
            >
              涨跌幅<i
                class="icon"
                :class="['up', 'down'][keys['px_change_rate']]"
                v-show="cur == 'px_change_rate'"
              ></i>
            </td>
            <td
              class="cur"
              @click="tagSort(keys['px_change_balance'], 'px_change_balance')"
            >
              涨跌
              <i
                class="icon"
                :class="['up', 'down'][keys['px_change_balance']]"
                v-show="cur == 'px_change_balance'"
              ></i>
            </td>
            <td
              class="cur"
              @click="tagSort(keys['business_amount'], 'business_amount')"
            >
              成交量{{
                $route.query.type == "sh2hk" || $route.query.type == "sz2hk"
                  ? "(股)"
                  : "(手)"
              }}
              <i
                class="icon"
                :class="['up', 'down'][keys['business_amount']]"
                v-show="cur == 'business_amount'"
              ></i>
            </td>
            <td
              class="cur"
              @click="tagSort(keys['business_balance'], 'business_balance')"
            >
              成交额{{
                $route.query.type == "sh2hk" || $route.query.type == "sz2hk"
                  ? "(港元)"
                  : ""
              }}
              <i
                class="icon"
                :class="['up', 'down'][keys['business_balance']]"
                v-show="cur == 'business_balance'"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys['amplitude'], 'amplitude')">
              振幅
              <i
                class="icon"
                :class="['up', 'down'][keys['amplitude']]"
                v-show="cur == 'amplitude'"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys['max_price'], 'max_price')">
              最高
              <i
                class="icon"
                :class="['up', 'down'][keys['max_price']]"
                v-show="cur == 'max_price'"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys['min_price'], 'min_price')">
              最低
              <i
                class="icon"
                :class="['up', 'down'][keys['min_price']]"
                v-show="cur == 'min_price'"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys['open_price'], 'open_price')">
              今开
              <i
                class="icon"
                :class="['up', 'down'][keys['open_price']]"
                v-show="cur == 'open_price'"
              ></i>
            </td>
            <td
              class="cur"
              @click="tagSort(keys['pre_close_price'], 'pre_close_price')"
            >
              昨收
              <i
                class="icon"
                :class="['up', 'down'][keys['pre_close_price']]"
                v-show="cur == 'pre_close_price'"
              ></i>
            </td>
            <td
              class="cur"
              @click="tagSort(keys['turnover_ratio'], 'turnover_ratio')"
            >
              换手率(%)
              <i
                class="icon"
                :class="['up', 'down'][keys['turnover_ratio']]"
                v-show="cur == 'turnover_ratio'"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys['pe'], 'pe')">
              市盈率(动态)
              <i
                class="icon"
                :class="['up', 'down'][keys['pe']]"
                v-show="cur == 'pe'"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys['pb'], 'pb')">
              市净率
              <i
                class="icon"
                :class="['up', 'down'][keys['pb']]"
                v-show="cur == 'pb'"
              ></i>
            </td>
            <td>上市时间</td>
          </tr>
        </thead>
      </table>
      <div class="table">
        <table>
          <tbody>
            <tr v-for="(item, i) in listData.list" :key="item.id">
              <td width="49px">{{ i + 1 }}</td>
              <td class="orange">{{ item.stockCode }}</td>
              <td class="orange">{{ item.stockName }}</td>
              <td :class="item.color">{{ fromatData(item.latest_price) }}</td>
              <td :class="item.color">
                {{ fromatData(item.px_change_rate, "%") }}
              </td>
              <td :class="item.color">
                {{ fromatData(item.px_change_balance) }}
              </td>
              <td class="blue">{{ fromatData(item.business_amount) }}</td>
              <td class="orange">{{ fromatData(item.business_balance) }}</td>
              <td class="blue">{{ fromatData(item.amplitude, "%") }}</td>
              <td :class="item.color">{{ fromatData(item.max_price) }}</td>
              <td :class="item.color">{{ fromatData(item.min_price) }}</td>
              <td :class="item.color">{{ fromatData(item.open_price) }}</td>
              <td>{{ fromatData(item.pre_close_price) }}</td>
              <td>{{ fromatData(item.turnover_ratio, "%") }}</td>
              <td>{{ fromatData(item.pe) }}</td>
              <td>{{ fromatData(item.pb) }}</td>
              <td>{{ item.listed_date || "--" }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <m-page
      @onPage="onPage"
      :pageSize="send.pageSize"
      :currentPage="send.pageNo"
      :total="listData.total"
    ></m-page>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Vue from "vue";
import mPage from "./mPage";
import { numberFormat } from "../script/utils";
const getKeys = () => ({
  latest_price: 1,
  px_change_rate: 1,
  px_change_balance: 1,
  business_amount: 1,
  business_balance: 1,
  amplitude: 1,
  max_price: 1,
  min_price: 1,
  open_price: 1,
  pre_close_price: 1,
  turnover_ratio: 1,
  pe: 1,
  pb: 1,
});
export default {
  data() {
    return {
      type: {
        hk2sh: "沪股通",
        sh2hk: "港股通(沪)",
        hk2sz: "深股通",
        sz2hk: "港股通(深)",
      },
      //   asc-升序,-降序
      sort: ["asc", "desc"],
      keys: getKeys(),
      cur: "px_change_rate",
      send: { pageNo: 1, pageSize: 30 },
      params: () => ({
        sort: "desc",
        field: "px_change_rate",
        type: this.$route.query.type,
        ...this.send,
      }),
    };
  },

  components: { "m-page": mPage },

  computed: {
    ...mapState(["listData"]),
  },
  watch: {
    listData(data) {
      console.log(data, "data");
      if (data.list.length > 0) {
        data.list.forEach((item) => {
          item.color = {
            red: item.px_change_rate > 0,
            green: item.px_change_rate < 0,
          };
          return item;
        });
      }
    },

    $route(to, from) {
      if (to.name != "list") return;
      this.reset();
      console.log(this.send.pageNo);
      this.$store.dispatch("getList", this.params());
    },
  },
  mounted() {
    this.$store.dispatch("getList", this.params());
  },

  methods: {
    fromatData(num, unit) {
      if (unit && typeof num == "number" && num != 0) {
        return num + "%";
      } else if (unit && num == null) {
        return "--";
      }
      if (num == null) return "--";
      return numberFormat(num);
    },
    tagSort(sort, keys) {
      this.cur = keys;
      this.keys[keys] = +!sort;
      this.send.sort = this.sort[+!sort];
      this.send.field = keys;
      this.$store.dispatch("getList", this.params());
    },
    reset() {
      this.cur = "px_change_rate";
      this.keys = getKeys();
      this.send = { pageNo: 1, pageSize: 30 };
    },
    onPage: function (inputpage) {
      this.send.pageNo = inputpage;
      this.$store.dispatch("getList", this.params());
      console.log("向父集传送当前页码" + inputpage);
    },
    back() {
      this.$router.push({ name: "index" });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../style/var.scss";
.border {
  border: 2px solid $color;
  border-radius: 6px;
}
.common {
  padding: 5px 5px 25px;
  box-sizing: border-box;
  .box {
    height: calc(100% - 75px);
    .table {
      height: calc(100% - 66px);
      overflow: auto;
    }
    .title {
      height: 34px;
      line-height: 34px;
      background: $color;
      .name {
        color: #ffffff;
        font-size: 16px;
        font-weight: 400;
        padding-left: 14px;
        cursor: pointer;
        &::before {
          content: "";
          margin-right: 8px;
          display: inline-block;
          width: 8px;
          height: 12px;
          background: url($PIC_URL + "/tlbypcWeb/support/back.png") no-repeat
            center;
        }
      }
    }
    table {
      width: 100%;
      text-align: center;
      line-height: 30px;
      table-layout: fixed;
      thead {
        background: $color;
        td {
          border: 1px solid #090910;
          font-size: 15px;
          color: #bcbfc4;
          &.cur {
            cursor: pointer;
          }
          .icon {
            display: inline-block;
            width: 7px;
            height: 9px;
            margin-left: 5px;
            &.down {
              background: url($PIC_URL + "/tlbypcWeb/support/grid_arrow.png")
                no-repeat center;
            }
            &.up {
              background: url($PIC_URL + "/tlbypcWeb/support/grid_2.png")
                no-repeat center;
            }
          }
        }
      }
      tbody {
        tr {
          &:hover {
            background: #2d3245;
          }
          td {
            font-size: 16px;
            color: #bcbfc4;
            &.orange {
              color: #f4f636;
            }
            &.blue {
              color: #02e2f4;
            }
            &.green {
              color: #61c869;
            }
            &.red {
              color: #ea2827;
            }
          }
        }
      }
    }
  }
}
</style>
